import React, { Component } from 'react';
import Zmage from 'react-zmage';
import { connect } from 'react-redux';
import { Modal, Button } from 'antd';
import { closeCommentModal } from '../../store/user/comment';
class CommentModal extends Component {
  constructor(props) {
    super(props);
  }
  comment = () => {
    const { detail, commentOrder } = this.props;
    const { imgs, content } = detail || { imgs: '', content: '' };
    return (
      <div style={{ minHeight: '10rem' }}>
        <div className="dfr">
          <span className="label">标题</span>
          <span>{commentOrder ? commentOrder.product.title : ''}</span>
        </div>
        <div
          className="dfr"
          style={{ alignItems: 'start', marginTop: '0.6rem' }}
        >
          <span className="label">评价</span>
          <span>{content}</span>
        </div>
        {imgs && imgs.length > 0 ? (
          <div className="dfr">
            <span className="label" />
            <ul>
              {imgs.map((img, index) => {
                return (
                  <li key={index} className="imgItem">
                    <Zmage src={img} className="imgCover" />
                  </li>
                );
              })}
            </ul>
          </div>
        ) : null}
      </div>
    );
  };
  render() {
    const { visible, closeCommentModal } = this.props;
    return (
      <Modal
        className="commentModal"
        visible={visible}
        title="我的评价"
        onCancel={() => closeCommentModal()}
        footer={[
          <Button key="back" type="primary" onClick={() => closeCommentModal()}>
            关闭
          </Button>
        ]}
      >
        {this.comment()}
      </Modal>
    );
  }
}
const mapStateToProps = state => ({
  visible: state.comment.commentModal.visible,
  detail: state.comment.detail,
  commentOrder: state.comment.commentOrder
});
const mapDispatchToProps = {
  closeCommentModal
};
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(CommentModal);
